<template>
	<view style="height: 356rpx">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {};
		},
		mounted() {
			let that = this
			this.$nextTick(() => {
				that.init()
			})
		},
		methods: {
			init() {
				this.$refs.chart.init(echarts, (chart) => {
					let option = option = {
						grid: {
							top: 0,
							bottom: '10%',
							left: 0,
							right: 0,
						},
						legend: false,
						xAxis: {
							type: 'category',
							data: ['01', '02', '03', '04', '05', '06', '07'],
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
						},
						yAxis: {
							type: 'value',
							show: false,
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
						},
						series: [{
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'bar',
							itemStyle: { 
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: '#B09FFF'
										},  
										{
											offset: 1,
											color: '#8D79F6'
										}  
									])
								}
							}
						}]
					};
					chart.setOption(option);
				});
			}
		}
	};
</script>